<template>
	<div class="hotCity">
		<h2>热门城市</h2>
		<ul>
			<!--<li>北京</li>
			<li>上海</li>
			<li class="on">三亚</li>
			<li>香港</li>
			<li>杭州</li>
			<li class="on">广州</li>
			<li>成都</li>
			<li>深圳</li>
			<li class="on">苏州</li>
			<li class="on2">桂林</li>
			<li class="on2">西安</li>
			<li class="on on2">厦门</li>-->
			<li v-for="item in hotcity" :key="item.id">{{item.name}}</li>
		</ul>
	</div>
</template>

<script>
	export default{
		props:["hotcity"],
		/*data(){
			hotcity:[
			   {id:1,
			   	addr:"北京" 	
			   },
			   {id:2,
			   	addr:"上海" 	
			   },
			   {id:3,
			   	addr:"三亚" 	
			   },
			   {id:4,
			   	addr:"香港" 	
			   },
			   {id:5,
			   	addr:"杭州" 	
			   },
			   {id:6,
			   	addr:"广州" 	
			   },
			   {id:7,
			   	addr:"成都" 	
			   },
			   {id:8,
			   	addr:"深圳" 	
			   },
			   {id:9,
			   	addr:"桂林" 	
			   },
			   {id:10,
			   	addr:"西安" 	
			   },
			   {id:11,
			   	addr:"厦门" 	
			   },
			]
		
		}*/
	}
	
	
	
</script>

<style scoped>
	.hotCity h2{
		background: #f5f5f5;
		font-size: .12rem;
    	padding: .12rem .15rem;
	}
	.hotCity ul{
		height: .9rem;
	}
	.hotCity ul li{
		width: 33.2%;
		height: .45rem;
	    line-height: .45rem;
	    font-size: .15rem;
	    text-align: center;
	    border-bottom: .01rem solid #ddd;
	    border-right: .005rem solid #ddd;
	  /*  margin-bottom: -1px;*/
	    float: left;
	}
/*	.hotCity ul li.on{
		border-right: none;
	}
	.hotCity ul li.on2{
		border-bottom: none;
	}*/
</style>